<template>
    <div class="header_container">
        <!-- 面包屑 -->
        <div class="header_left">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">ホームページ</el-breadcrumb-item>
                <el-breadcrumb-item v-if="route">
                 {{ breadcrumbTitle }}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 右侧用户名、头像 -->
        <div class="header_right">
            <!-- 头像 -->
            <!--
            <div class="avatar">
                <el-image :src="avatar" class="avatar_img"/>
            </div>
            -->
            <!-- 用户名 -->
            <div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{userName}}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item divided @click="logout">ログアウト</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// 获取路由对象和路由器
const route = useRoute();
const router = useRouter();
const userName= localStorage.getItem('userName')
// 计算属性，获取当前路由的标题
const breadcrumbTitle = computed(() => {
    console.log('route=====>',route);
    const matched = route.matched;
    return matched.length > 0 && matched[matched.length - 1].meta.title !== "ホームページ"
        ? matched[matched.length - 1].meta.title
        : "";
});

// 登出方法
function logout() {
    localStorage.removeItem('token');
    router.push("/login");
}
</script>

<style lang="scss" scoped>
.header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 100%;

    .header_right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;

        .el-dropdown-link {
            cursor: pointer;
            display: flex;
            align-items: center;
            border: none;
            outline: none; // 取出边框
        }
    }
}
</style>
